<template>
  商品列表

  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="proname" label="商品名字" width="180" align="center" />
    <el-table-column label="图片" align="center">
      <!--  #default="scope"  -->
      <!-- scope 组件内部反传回来的值，scope.row是数组对应元素 -->
      <template #default="scope">
        <img :src="scope.row.imgs[0]" alt="" class="img" />
      </template>
    </el-table-column>

    <el-table-column label="是否售卖" align="center">
      <!--  #default="scope"  -->
      <!-- scope 组件内部反传回来的值，scope.row是数组对应元素 -->
      <template #default="scope">
        <el-switch
          v-model="scope.row.issale"
          @change="isSaleChange(scope.row)"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>

    <el-table-column label="操作" align="center">
      <template #default="scope">
        <!-- productUpdate -->
        <el-button
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          v-per="'productUpdate'"
        >
          <!-- v-if="userStore.permissionBtnList?.includes('productUpdate')" -->
          编辑
        </el-button>
        <!-- productDel -->
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          v-per="'productDel'"
        >
          <!-- v-if="userStore.permissionBtnList?.includes('productDel')" -->
          <!--  -->
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- :total="total" 总页数 -->
  <!-- v-model:current-page 第几页  -->
  <!-- :page-size="limitNum" 一页多条数据 -->
  <el-pagination
    layout="prev, pager, next"
    :total="total"
    v-model:current-page="count"
    @change="pageChange"
    :page-size="limitNum"
  />

  <el-drawer v-model="drawer2" :direction="'rtl'" size="50%">
    <template #header>
      <h4>set title by slot</h4>
    </template>
    <template #default>
      <el-form :model="editObj" label-width="auto">
        <el-form-item label="商品名称">
          <el-input v-model="editObj.proname" />
        </el-form-item>

        <el-form-item label="商品价格">
          <el-input v-model="editObj.originprice" />
        </el-form-item>

        <el-form-item label="商品详细信息">
          <el-input v-model="editObj.desc" />
        </el-form-item>

        <!-- 图片墙组件 -->
        <!-- action 后面跟的上传图片的接口地址 -->
        <!-- name 控制上传图片的的参数名--看接口文档 -->
        <el-upload
          v-model:file-list="fileList"
          action="http://localhost:3001/admin/file/upload"
          name="img"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <!-- 预览弹框 -->
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="drawer2 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { proDelRequest, proListRequest, proUpdateRequest } from '@/api/pro'
import { ref } from 'vue'

import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { useUserStore } from '@/stores/user'

const tableData = ref<Array<IListItemData>>([])
const count = ref(1)
const limitNum = ref(5)
const total = ref(0)
const userStore = useUserStore()

//页码改变
function pageChange(e) {
  console.log(count)
  console.log(e)

  //发起请求
  loadList()
}

function loadList() {
  // 传入页码
  proListRequest(count.value, limitNum.value).then((r) => {
    console.log(r.data.data)
    //列表请求成功以后-数组存入tabbleData-列表更新
    tableData.value = r.data.data
    total.value = r.data.total
  })
}

loadList()

// 删除
const handleDelete = async (index: number, row: IListItemData) => {
  console.log(index, row)
  const r = await proDelRequest(row.proid)
  console.log(r.data)
  loadList()
}
// 是否售卖编辑
function isSaleChange(row: IListItemData) {
  console.log(row.issale)

  proUpdateRequest(row.proid, { issale: row.issale }).then(() => {
    loadList()
  })
}

// 控制抽屉的显示和隐藏
const drawer2 = ref(false)
const editObj = ref<IListItemData>()
const handleEdit = (index: number, row: IListItemData) => {
  console.log(index, row)
  // 点击编辑按钮
  drawer2.value = true
  // row 要编辑的数据--深拷贝
  editObj.value = JSON.parse(JSON.stringify(row))
  // editObj.value.imgs ['dizhi',ur]
  // fileList.value  [{name,url}]
  // 把字符串数组-转为对象数组
  fileList.value = editObj.value?.imgs.map((v) => {
    return {
      name: v,
      url: v,
    }
  }) as UploadUserFile[]
}
//保存的事件
function onSubmit() {
  // 点击保存--上传图片组件修改filelist属性
  // imgs 没有修改，接口文档要求修改imgs

  const imgs = fileList.value.map((v) => {
    if (v.response) {
      //v 是刚刚上传的图片
      return v.response.fileUrl
    } else {
      return v.url
    }
  })
  console.log(imgs)
  ;(editObj.value as IListItemData).imgs = imgs

  console.log(editObj.value)
  // 调用保存接口--隐藏抽屉
  // editObj.value as IListItemData 断定 变量一定是某个类型
  proUpdateRequest((editObj.value as IListItemData).proid, editObj.value as IListItemData).then(
    () => {
      //隐藏抽屉
      drawer2.value = false

      loadList()
    },
  )
}

// 上传图片
const fileList = ref<UploadUserFile[]>([
  // 组件的数据源--数组里面的元素格式固定的 name和url属性
  //
  // {
  //   name: 'food.jpeg',
  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  // },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
</script>

<style scoped>
.img {
  width: 100px;
}
</style>
